<template>
	<view class="content">
		<u-navbar title="我的地址" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="card-add">
			<u-form labelPosition="left" labelWidth="240rpx" ref="uForm" :model="modelfrom" :rules="rules">
				<u-form-item label="收货人" prop="name">
					<u-input border="none" placeholder="请填写收货人姓名" v-model="modelfrom.name"></u-input>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone">
					<u-input border="none" placeholder="请填写收货人手机号" v-model="modelfrom.phone"></u-input>
				</u-form-item>
				<u-form-item label="所在地区" prop="region">
					<u-input border="none" placeholder="请选择所在地区" v-model="modelfrom.region">
						<template slot="suffix">
							<view style="display: flex;" @click="addresbtn">
								<u-icon name="map-fill"></u-icon>
								<text style="font-size: 24rpx;color:#095907;">获取位置</text>
							</view>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail">
					<u-input border="none" placeholder="请填写街道、楼牌号等" v-model="modelfrom.detail"></u-input>
				</u-form-item>
				<u-form-item label="标签" prop="label">
					<view class="lablei-mini">
						<view class="option" v-for="item in options" :key="item"
							:class="{ 'selected': item === modelfrom.label }" @click="selectOption(item)">
							{{ item }}
						</view>
					</view>
				</u-form-item>
				<u-form-item label="设置为默认地址" prop="is_default">
					<u-switch :inactive-value="0" :active-value="1" inactive-color="#ccc" v-model="modelfrom.is_default"
						:size='20' active-color="#025e21"></u-switch>
				</u-form-item>
			</u-form>
		</view>
		<u-button type="primary" shape="circle" @click="submitbtn">保存地址</u-button>
		<view style="height: 30rpx;"></view>
		<u-button type="primary" plain v-if="userid" shape="circle" @click="show = true">删除</u-button>
		<u-modal :show="show" :showCancelButton="true"
		content='你确定要删除地址?' @confirm='manage' @cancel="show = false"></u-modal>
	</view>
</template>

<script>
	import qqmap from '../../utils/qqmap.js'
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				options: ['家', '公司', '学校'],
				userid:null,
				show:false,
				modelfrom: {
					name: '',
					phone: '',
					region: '',
					detail: '',
					label: '',
					is_default: 0,
					lat:'',
					lng:''
				},
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					}],
					'phone': [{
						required: true,
						message: '请填写收货人手机号',
						trigger: 'blur'
					},{pattern:'^1[3456789]\\d{9}$',message:'请填写正确的手机号',trigger:'blur'}]
				}
			}
		},
		methods: {
			selectOption(option) {
				this.modelfrom.label = option; // 更新选中项
			},
			submitbtn() {
				this.$refs.uForm.validate().then(async res => {
					if(this.userid){
					await http({
						url:`/user/address/${this.userid}`,
						method:'PUT',
						data:this.modelfrom
					})
					}else{
					await http({
						url: '/user/address',
						method: 'POST',
						data: this.modelfrom
					})
					}
					uni.$u.toast('信息保存成功')
					this.$refs.uForm.resetFields()
					uni.navigateBack()
				}).catch(err => {
					uni.$u.toast('请完善信息')
				})
			},
			//跳转
			addresbtn() {
				uni.navigateTo({
					url:'/page_search/mapposition'
				})
			},
			async usertails(id){
				const res = await http({
					url:`/user/address/${id}`
				})
				this.modelfrom = res.data
			},
			async manage(){
				if(this.userid){
					await http({
						url:`/user/address/${this.userid}`,
						method:'DELETE'
					})
					this.show = false
					uni.navigateBack()
					this.$bus.$emit('addadd')
				}
			}
		},
		onShow() {
			this.$bus.$on('backWithParams', params => {
					this.modelfrom.region = params.param.split("区")[0] + '区'
					this.modelfrom.detail = params.param.split("区")[1]
					this.modelfrom.lat = params.position.lat
					this.modelfrom.lng = params.position.lng
			})
		},
		onLoad(obj) {
			if(obj.id){
				this.userid = obj.id
				this.usertails(obj.id)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.content {
		padding: 0 40rpx;
		margin-top: 200rpx;
	}

	.card-add {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 500rpx;
	}

	.lablei-mini {
		display: flex;
	}

	.option {
		display: inline-block;
		margin-right: 10rpx;
		padding: 3rpx 24rpx;
		border: 1px solid #ccc;
		border-radius: 60rpx;
		cursor: pointer;
		font-size: 24rpx;
	}

	.selected {
		background-color: #025e21;
		color: #FFF;
	}

	.popup-box {
		height: 660rpx;
		padding: 20rpx 18rpx;

		.popup-item {
			padding: 20rpx 10rpx;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx solid #f2f2f2;

			text {
				&:nth-child(2) {
					font-size: 20rpx;
					color: #999;
				}
			}
		}
	}
</style>